<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>实名认证</title>
    <link href="css/swiper.min.css" rel="stylesheet"/>
    <link href="css/public.css" rel="stylesheet"/>
    <link href="css/main.css" rel="stylesheet"/>
    <link href="css/style.css" rel="stylesheet"/>

    <script src="./js/jquery-1.9.1.js"></script>

    <script src="js/mobile-util.js"></script>
    <script src="js/layer/layer.js"></script>
    <script src="js/public.js?v=1"></script>
    <script src="../mifiadmin/js/common.js"></script>
	<script>
		/*获取url参数*/
		function getUrlParam(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
			var r = window.location.search.substr(1).match(reg);  //匹配目标参数
			if (r != null) return unescape(r[2]); return null; //返回参数值
		}

		/*获取url参数end*/

		function dealImage(path, obj, callback){
			var img = new Image();
			img.src = path;
			img.onload = function(){
				var that = this;
				// 默认按比例压缩
				var w = that.width,
						h = that.height,
						scale = w / h;
				w = obj.width || w;
				h = obj.height || (w / scale);
				var quality = 0.9;  // 默认图片质量为0.7
				//生成canvas
				var canvas = document.createElement('canvas');
				var ctx = canvas.getContext('2d');
				// 创建属性节点
				var anw = document.createAttribute("width");
				anw.nodeValue = w;
				var anh = document.createAttribute("height");
				anh.nodeValue = h;
				canvas.setAttributeNode(anw);
				canvas.setAttributeNode(anh);
				ctx.drawImage(that, 0, 0, w, h);
				// 图像质量
				if(obj.quality && obj.quality <= 1 && obj.quality > 0){
					quality = obj.quality;
				}
				// quality值越小，所绘制出的图像越模糊
				var base64 = canvas.toDataURL('image/jpeg', quality );
				// 回调函数返回base64的值
				callback(base64);
			}
		}

	</script>

	<style>
		.markbox{
			display: none;
		}
		.realright input{
			height: auto;
			line-height: normal;
			padding: .4rem 0;
			font-size: .55rem;
		}
	</style>

</head>
<body>

<header class="mui-bar mui-bar-nav indexheader flex">
    <div class="headerlogo" onclick="goIndex()">
        <i class="iconfont backbtn">&#xe602;</i>
    </div>

    <div class="headertitle">
        <p>实名认证</p>
    </div>

    <div class="headerright">

    </div>

</header>


<main class="realmain">
	

    <form class="forms1" action="" class="hide" method="post" enctype="multipart/form-data">
        <input type="file" name="carid_image_z" />
		<input type="file" name="carid_image_f" />
        <input type="submit" value="提交" />
    </form>

	<!--<form   id="realmainform" method="post" action="http://wifi.qianlh.com/mobile/Userapi/user_api" enctype="multipart/form-data" >-->
		<!--<input type="file" name="carid_image_z">-->


		<ul class="realui">
            <li class="flex">
                <div class="realleft">
                    <span class="red">*</span>真实姓名
                </div>
                <div class="realright">
                    <input type="text" placeholder="请输入您的真实姓名" name="realname" id="realname">
                </div>
            </li>



            <li class="flex">
                <div class="realleft">
                    <span class="red">*</span>手机号码
                </div>
                <div class="realright">
                    <input type="number" placeholder="请输入您的手机号码"  name="mobile" id="mobile" data-name="sj" >
                </div>
            </li>


			<!--<li class="flex">-->
				<!--<div class="realleft">-->
					<!--<span class="red">*</span>QQ号-->
				<!--</div>-->
				<!--<div class="realright">-->
					<!--<input type="number" placeholder="请输入您的QQ号码"   name="qq" id="qqcode" data-name="qq" >-->
				<!--</div>-->
			<!--</li>-->

			<li class="flex">
				<div class="realleft">
					<span class="red">*</span>身份证号
				</div>
				<div class="realright">
					<input type="text" placeholder="请输入您的身份证号" maxlength="18" name="carid" id="carid" data-name="sfz" >
				</div>
			</li>




            <li class="border-bono">


                <div class="realleft">
                    <span class="red">*</span>上传身份证
                </div>

				<div class="identitybox flex">
					<div class="identitymain">
						<div class="identitydiv">
							<div class="identityp">
								<i class="iconfont uploadicon">&#xe651;<br></i>
								<p>身份证正面</p>
							</div>

						</div>

							<!--<input type="file" class="identitybtn" name="carid_image_z"  id="carid_image_z"  onchange="selectImage(this);" >-->
							<input class="identitybtn" name="carid_image_z" accept="image/*" id="carid_image_z"  onchange="selectImage(this);"   type="file">



						<div class="preview">
							<img id="imgheadz" width=100% height=auto border=0 src=''>
						</div>


					</div>

					<div class="identitymain ma-le-1">
						<div class="identitydiv">

							<div class="identityp">
								<i class="iconfont uploadicon">&#xe651;<br></i>
								<p>身份证反面</p>
							</div>

							<input type="file" class="identitybtn" accept="image/*" name="carid_image_f"  onchange="selectImage1(this);" id="carid_image_f">
							<div class="preview">
								<img id="imgheadf" width=100% height=auto border=0 src=''>
							</div>


						</div>
					</div>
				</div>

				<div class="clear"></div>

				<div class="identitybox flex" style="margin-top: 1rem">
					<div class="identitymain ">
						<div class="identitydiv">

							<div class="identityp">
								<i class="iconfont uploadicon">&#xe651;<br></i>
								<p>手持身份证正面照</p>
							</div>

							<input type="file" class="identitybtn" accept="image/*" name="carid_image_s"  onchange="selectImage2(this);" id="carid_image_s">
							<div class="preview">
								<img id="imgheads"  border=0 src=''>
							</div>


						</div>
					</div>
				</div>



                <!--<div class="realright">-->
                    <!--<input type="file" id="ipt" class="hide">-->
                    <!--<button id="btn" class="uploadbtn">上传图片</button>-->
                    <!--<p class="realprompt"><span class="red">*</span>证件需清晰有效且为原件，发现虚假将封账号</p>-->
                    <!--<p class="realprompt1">仅支持.jpg.jpeg.png的图片格式，图片大小不超过500K</p>-->
                <!--</div>-->


            </li>


        </ul>

		<input type="hidden" id="device_sn" value="15465411231" name="device_sn">
		<input type="hidden" id="user_id" value="10001">

		<div class="ma-speen-5">
			<input type="button" value="提交认证"  onclick="formValidate()"  class="rechargebtn">
		</div>

	<!--</form>-->

</main>

<!--加载等待-->
<div class="markbox">
	<img src="img/loading1.gif" />
</div>
<!--加载等待end-->

</body>


<script type="text/javascript">
    // var btn = document.querySelector('#btn'),
    //     ipt = document.querySelector('#ipt');
    // btn.addEventListener('click',function(){
    //     ipt.click();
    // });


	// $('.identitybtn').change(function(){
	// 	var objUrl = $(this).val();
    //
	// 	if (objUrl)
	// 	{
	// 		$(this).siblings("img").attr("src",objUrl);
	// 	}
	// })
</script>



<script>

	var urls = url+'/Mobile/Userapi/user_api';
	$('.forms1').attr('action',url);

	var image = '';
	function selectImage(file){
		if(!file.files || !file.files[0]){
			return;
		}

		var reader = new FileReader();

		reader.onload = function(evt){
			// console.log(evt);
			document.getElementById('imgheadz').src = evt.target.result;
			image = evt.target.result;
		};
		reader.readAsDataURL(file.files[0]);

		$('.markbox').show();
		setTimeout(function(){
			$('.markbox').hide();
		},2000);


		iimghead=$('#imgheadz');

		iimghead.show();
		setTimeout(function(){
			var url2=iimghead.attr("src");
			//console.log(url2);
			dealImage(url2, {width : 700}, function(base){

				//直接将获取到的base64的字符串，放到一个image标签中就可看到测试后的压缩之后的样式图了
				iimghead.attr("src",base);



			});
		},1000);



	}
	function selectImage1(file){
		if(!file.files || !file.files[0]){
			return;
		}
		var reader = new FileReader();
		reader.onload = function(evt){
			document.getElementById('imgheadf').src = evt.target.result;
			image = evt.target.result;
		};
		reader.readAsDataURL(file.files[0]);
		$('.markbox').show();
		setTimeout(function(){
			$('.markbox').hide();
		},2000);

		imghead1=$('#imgheadf');

		imghead1.show();
		setTimeout(function(){
			var url2=imghead1.attr("src");
			//console.log(url2);
			dealImage(url2, {width : 400}, function(base){

				//直接将获取到的base64的字符串，放到一个image标签中就可看到测试后的压缩之后的样式图了
				imghead1.attr("src",base);



			});
		},1000);

	}

	function selectImage2(file){
		if(!file.files || !file.files[0]){
			return;
		}
		var reader = new FileReader();
		reader.onload = function(evt){
			document.getElementById('imgheads').src = evt.target.result;
			image = evt.target.result;
		};
		reader.readAsDataURL(file.files[0]);
		$('.markbox').show();
		setTimeout(function(){
			$('.markbox').hide();
		},2000);

		imghead2=$('#imgheads');

		imghead2.show();
		setTimeout(function(){
			var url2=imghead2.attr("src");
			//console.log(url2);
			dealImage(url2, {width : 400}, function(base){

				//直接将获取到的base64的字符串，放到一个image标签中就可看到测试后的压缩之后的样式图了
				imghead2.attr("src",base);
				console.log(base);


			});
		},1000);




	}

</script>





<script>

	/*返回首页*/
	function goIndex(){
		var device_sn=getUrlParam("device_sn");
		window.location.href="index.html?device_sn="+device_sn;
	}


	$("#mobile").keydown(function(event) {
		var reg = /^\d{11}$/;
		var value = $(this).val();
		var e = event || window.event || arguments.callee.caller.arguments[0];

		if(e.keyCode === 8) {
			return true;
		}

		if(e.keyCode == 32) {
			return false;
		}

		if(reg.test(value)) {
			return false;
		}

	});

	// $("#qqcode").keydown(function(event) {
	// 	var reg = /^\d{11}$/;
	// 	var value = $(this).val();
	// 	var e = event || window.event || arguments.callee.caller.arguments[0];
    //
	// 	if(e.keyCode === 8) {
	// 		return true;
	// 	}
    //
	// 	if(e.keyCode == 32) {
	// 		return false;
	// 	}
    //
	// 	if(reg.test(value)) {
	// 		return false;
	// 	}
    //
	// });


	// 验证函数
    function formValidate() {

		var name=$('#realname').val();
		var phone=$('#mobile').val();
		var identity=$('#carid').val();
		var qq=$('#qqcode').val();

        // 判断手机号码
        if ($('#realname').val() == "") {

            alert("请输入您的真实姓名");
            $('#realname').focus();
            return false;
        }
		if($('#mobile').val() == "") {
			alert("请输入手机号");

			$('#mobile').focus();
			return false;
		}else if(!checkMobile(phone)){
			alert("手机号码格式有误");
			$('#mobile').focus();
			return false;
		}


		//验证QQ
		// if(qq == "") {
		// 	alert("请输入QQ号");
		// 	$('#qq').focus();
		// 	return false;
		// }else if(!isQQ(qq)){
		// 	alert("QQ号格式有误");
		// 	$('#qq').focus();
		// 	return false;
		// }



		// 验证身份证
        if($('#carid').val() == "") {

			alert("请输入身份证号");
            $('#carid').focus();
			return false;
        }else if(!isCardNo(identity)){
			alert("身份证号码格式有误");
			$('#carid').focus();
			return false;
		}


		//图片验证
		var  imgheadz=$("#imgheadz");
		var  imgheadf=$("#imgheadf");
		var  imgheads=$("#imgheads");

		if(imgheadz.attr("src") == ""){
			alert("请上传身份证正面照");
			return false;
		}else if(imgheadf.attr("src")==""){
			alert("请上传身份证反面照");
			return false;
		}else if(imgheads.attr("src")==""){
			alert("请上传手持身份证照");
			return false;
		}



		var url1=url+"/mobile/Userapi/user_api";
       // var url2="http://route.showapi.com/928-1?showapi_appid=46025&showapi_sign=9ae1e39a89e24ef986cc0ae9b87998b8";
		var device_sn=getUrlParam("device_sn");


		//$('#realmainform').submit();

		//console.log($("#carid_image_z")[0].files[0]);

		$('.markbox').show();
		setTimeout(function(){
			$('.markbox').hide();
		},2000);

		var formData = new FormData();
		formData.append("device_sn", device_sn);
		formData.append("realname", name);
		formData.append("mobile", phone);
		formData.append("carid", identity);
		// formData.append("qq", qq);
		formData.append("carid_image_z", imgheadz.attr("src"));
		formData.append("carid_image_f", imgheadf.attr("src"));
		formData.append("carid_image_s", imgheads.attr("src"));
		// formData.append("carid_image_z", $("#carid_image_z")[0].files[0]);
		// formData.append("carid_image_f", $("#carid_image_f")[0].files[0]);
		console.log(formData);
		$.ajax({
			url: url1,
			type: 'post',
			data: formData,
			processData: false,
			contentType: false,
			success: function (data) {
				console.log(data);
				var data1=JSON.parse(data);
				var successcode=data1.success;

				if(successcode.code == 4009){
					alert(data1.message);
					return false;

				}else if(successcode.code == 4000){
					window.location.href=url+"/mobile/login.html?device_sn="+device_sn;
				}else if(successcode.code == 5000){
					alert(data1.message);
					return false;
				}



			},
			error:function (data) {

				console.log(data);

			}
		});







	}


    /*手机，身份证验证end*/







</script>


</html>
